import React from 'react';
import { Space, Avatar, Dropdown } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { history } from '@umijs/max';
import { logoutWithNavigation } from '@/utils/logout';

interface RightContentProps {
  currentUser?: {
    username: string;
    email: string;
    real_name?: string;
  };
}

const RightContent: React.FC<RightContentProps> = ({ currentUser }) => {
  console.log('RightContent received currentUser:', currentUser);

  if (!currentUser) {
    console.log('No currentUser, returning null');
    return null;
  }

  const handleLogout = () => {
    logoutWithNavigation();
  };

  const items: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人信息',
      onClick: () => {
        history.push('/user/profile');
      },
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '登出',
      onClick: handleLogout,
      danger: true,
    },
  ];

  return (
    <Space>
      <Dropdown menu={{ items }} placement="bottomRight">
        <Space style={{ cursor: 'pointer', padding: '0 12px' }}>
          <Avatar size="small" icon={<UserOutlined />} />
          <span>{currentUser.real_name || currentUser.username}</span>
        </Space>
      </Dropdown>
    </Space>
  );
};

export default RightContent;
